<template>
  <uni-nav-bar title="充值订单" color="#333" left-icon="left"
    @clickLeft="state?redirectTo('account/account?type=1'):navBack()" statusBar></uni-nav-bar>
  <view class="package " style="padding: 10rpx 20rpx 0px;">
    <uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
      activeColor="#1D92FF"></uni-segmented-control>
  </view>
  <view class="package direction-start" style="padding-top: 0px;">
    <view class="datas">
      <uni-datetime-picker v-model="range" type="daterange" :border="false" :clear-icon="false" rangeSeparator="至"
        @change="change" />
    </view>
    <view class="center">
      <view>金额：¥{{price}}</view>
      <view style="margin-left: 30rpx;" v-if="current === 1">奖励：¥{{jiang}}</view>
    </view>
  </view>
  <!-- 列表 -->
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px' }">
    <view class="package direction-start" v-for="(item, index) in orderLists" :key="item.id"
      :style="{ marginTop: index === 0 ? '0px' : '15rpx' }">
      <view class="space-between">
        <view v-if="current === 1">帮{{item.driver_name}}充值</view>
        <view v-else>找{{item.from_driver_name}}充值</view>
        <view style="color: #1B91FF ;" v-if="current === 1">{{item.pay_fee}}</view>
        <view style="color: #FF3D3D;" v-else>+{{item.pay_fee}}</view>
      </view>
      <view class="space-between" style="margin-top: 10rpx;">
        <view style="color: #666;font-size: 28rpx;">{{item.createtime}}</view>
        <view style="color: #FF3D3D;" v-if="current === 1">奖励:¥{{item.from_price}}</view>
        <view v-else>{{item.driver_name}}</view>
      </view>
    </view>
    <view v-if="orderLists.length < 1" class="column" :style="{ height: pageHeight + 'px' }">
      <image :src="Empty2"></image>
      <text>暂无充值</text>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import { redirectTo, navBack } from '@/utils/navigator';
  import { format, subDays } from 'date-fns';
  import { onLoad } from '@dcloudio/uni-app';
  import { Empty2 } from '@/utils/Static';
  import { toPublish } from '@mqtt';
  import { showLoading } from '@/utils/prompt';
  import { recharge_list } from '@/gql/account';
  import { getDriverID } from '@/stores/driverID';
  const driver_id = getDriverID();
  // data
  const now = new Date();
  let end = format(now, 'yyyy-MM-dd');
  const daysAgo = subDays(now, 6);
  let start = format(daysAgo, 'yyyy-MM-dd');
  const range = ref([start, end]);

  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const orderLists = ref([]);

  const price = ref()
  const jiang = ref()

  const current = ref(0);
  const items = ['找人充', '帮人冲'];
  const pageHeight = ref('');

  const state = ref()
  onLoad((pearm) => {
    state.value = pearm.type
    uni.getSystemInfo({
      success: function (res) {
        pageHeight.value = (res.windowHeight - 180).toString();
      },
    });
    init()
  });
  function init() {
    showLoading();
    isLoading.value = true;
    const type = current.value === 0 ? 1 : 2
    const payload = {
      query: recharge_list,
      variables: {
        page: currentPage.value,
        start,
        end,
        driver_id,
        type,
      },
    };
    toPublish('ql/driver/getRechargeImage', payload, (obj : any) => {
      const { recharge_list } = obj.data;
      isLoading.value = false;
      orderLists.value = [...orderLists.value, ...recharge_list.list];
      lastPage.value = recharge_list.lastpage;
      price.value = recharge_list.money;
      jiang.value = recharge_list.jiang;
    });
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
  function onClickItem(e) {
    current.value = e.currentIndex;
    currentPage.value = 1;
    orderLists.value = []
    init()
  }

  /**
   * 赛选时间段
   * @param currentPage  当前获取加注页数
   * @param orderLists  清空加注订单列表
   * @param start  赛选开始时间
   * @param end  赛选结束时间
   * @return 再次获取加注订单
   */
  function change([sta, en]) {
    currentPage.value = 1;
    orderLists.value = []
    start = sta;
    end = en;
    init()
  }
</script>

<style lang="less">
  .center {
    font-size: 28rpx;
    color: #666;
  }

  .column {
    image {
      width: 352rpx;
      height: 352rpx;
    }

    text {
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-top: 20rpx;
    }
  }

  .space-between {
    width: 100%;
  }
</style>
<style>
  .datas>>>.uni-date__x-input {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-date-x {
    font-size: 30rpx !important;
  }

  .datas>>>.uni-icons {
    font-size: 48rpx !important;
  }
</style>